<template>
    <!-- 查询条件 -->
    <el-card>
        <el-form :model="condition" :inline="true">
            <el-form-item align="left">
                <el-button type="success" size="default"
                    @click="storeAddVisiable = true; session.set('fromStoreList', true)">门店添加</el-button>
                <el-dialog v-model="storeAddVisiable" width="35%">
                    <!-- <storeAdd>
                        <template v-slot:title>
                            门店添加
                        </template>
</storeAdd> -->
                    <p class="p">
                        店铺申请
                        <!-- <slot name="title">申请您的第一个店铺</slot> -->
                    </p>

                    <el-form :model="form" label-width="100px" :inline="false" style="width:500px;margin:0 auto">
                        <el-row :gutter="20">
                            <el-col :span="10" :offset="0"><el-form-item label="商户名称：">
                                    <el-input v-model="form.StoreName"></el-input>
                                </el-form-item></el-col>
                            <el-col :span="14" :offset="0"><el-form-item label="所在地：">
                                    <el-cascader v-model="form.AddressArr" :options="addressTreeList.value"
                                        :props="props1" clearable @change="handleChange" />
                                </el-form-item></el-col>
                        </el-row>

                        <el-form-item label="酒店类型：">
                            <el-select style="width:150px" v-model="form.HotelType" placeholder="请选择酒店类型" clearable>
                                <el-option v-for="item in hotelTypeList" :key="item.Id" :label="item.Value"
                                    :value="item.Id">
                                </el-option>
                            </el-select>

                        </el-form-item><el-form-item label="商户LOGO：">
                            <el-upload class="upload-demo" drag
                                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                                style="width:200px">
                                <div>图片上传</div>
                            </el-upload>
                        </el-form-item>




                        <el-form-item label="商户简介：">
                            <el-input v-model="form.Introduction" style="width: 240px" :rows="5" type="textarea"
                                placeholder="Please input" />
                        </el-form-item>
                        <el-form-item label="自定义文案：" size="normal">
                            <el-input v-model="form.Remark"> </el-input>
                        </el-form-item>
                        <p style="text-align:center">
                            <el-button type="primary" size="default" @click="storeAdd">申请</el-button>
                        </p>
                    </el-form>
                </el-dialog>

            </el-form-item>
            <el-form-item align="left">
                <el-cascader v-model="condition.addressArr" :options="addressTreeList.value" :props="props1" clearable
                    @change="handleChange" />
            </el-form-item>
            <el-form-item align="left">
                <el-button type="default" size="default"
                    @click="condition.addressArr = []; handleCurrentChange(1)">清空城市筛选</el-button>
            </el-form-item>
            <el-form-item align="left">
                <el-select v-model="condition.storeStatus" placeholder="门店状态" clearable style="width:150px">
                    <el-option v-for="   item    in    storeStatusList   " :key="item.value" :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item style="float:right">
                <el-input v-model="condition.storeName" placeholder="门店名称" clearable>
                </el-input>
            </el-form-item>
        </el-form>
    </el-card>
    <!-- 列表显示 -->
    <el-card>
        <el-table :data="storeList.value" border stripe>
            <el-table-column label="序号" type="index" align="center" width="100">

            </el-table-column>
            <el-table-column label="门店名称" prop="StoreName" align="center">
            </el-table-column>

            <el-table-column label="门店地址" prop="Address" align="center">
            </el-table-column>
            <el-table-column label="门店类型" prop="HotelTypeName" align="center">
            </el-table-column>
            <el-table-column label="门店状态" prop="StoreStatus" align="center">
                <template v-slot="scope">
                    {{ !scope.row.StoreStatus ? "启用" : "禁用" }}
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template v-slot="scope">
                    <el-link type="primary">设置管理员</el-link>
                    <el-link type="primary">编辑</el-link>
                    <el-link type="primary">停用</el-link>

                </template>
            </el-table-column>

        </el-table>

    </el-card>
    <!-- 分页 -->
    <el-card>
        <table style="margin: 5px auto;">
            <tbody>
                <tr>
                    <td><el-pagination v-model:current-page="pager.pageIndex" v-model:page-size="pager.pageSize"
                            :page-sizes="[1, 2, 3, 10]" layout="total, slot,sizes" :total="pager.totalCount"
                            @size-change="handleSizeChange" @current-change="handleCurrentChange" prev-text="上一页"
                            next-text="下一页">
                            <span class="el-pagination__total is-first">&nbsp;共计{{ pager.pageCount }}页,当前{{
            pager.pageIndex
        }}/{{ pager.pageCount }}页</span>
                        </el-pagination>
                    </td>
                    <td><el-pagination v-model:current-page="pager.pageIndex" v-model:page-size="pager.pageSize"
                            :page-sizes="[1, 2, 3, 10]" layout="slot, prev, pager" :total="pager.totalCount"
                            @size-change="handleSizeChange" @current-change="handleCurrentChange" prev-text="上一页"
                            next-text="下一页">
                            <button @click="handleCurrentChange(1)" :disabled="pager.pageIndex == 1"
                                class="btn-prev">首页</button>
                        </el-pagination></td>
                    <td><el-pagination v-model:current-page="pager.pageIndex" v-model:page-size="pager.pageSize"
                            :page-sizes="[1, 2, 3, 10]" layout="slot, next, jumper" :total="pager.totalCount"
                            @size-change="handleSizeChange" @current-change="handleCurrentChange" prev-text="上一页"
                            next-text="下一页">
                            <button @click="handleCurrentChange(pager.pageCount)"
                                :disabled="pager.pageIndex == pager.pageCount" class="next-prev">尾页</button>
                        </el-pagination></td>
                </tr>
            </tbody>
        </table>
    </el-card>

</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';

import axios from 'axios'
import { loginStore } from '@/stores/login';
import { session } from '@/stores/storageHelper.ts'
import { baseURL_dev } from '@/config/baseURL'
//import StoreAdd from './ApplyStore.vue';

const baseURL = baseURL_dev
axios.defaults.baseURL = baseURL
const store = loginStore();

const storeList = reactive([{
    "StoreId": "",
    "StoreName": "",
    "Address": "",
    "HotelType": 0,
    "HotelLogo": "",
    "Introduction": "",
    "Remark": "",
    "StoreStatus": false,
    "CreateTime": "",

}])
const condition = reactive({
    address: "",
    addressArr: [],
    storeStatus: "",
    storeName: "",
})
//获取登录租户的门店列表
function getStoreList() {
    axios.get("Store/GetStoreListByTenantId", {
        params: {
            address: condition.addressArr == null ? "" : condition.addressArr.join(''),
            storeStatus: condition.storeStatus,
            storeName: condition.storeName,
            pageSize: pager.pageSize,
            pageIndex: pager.pageIndex,
        }
    }).then(res => {
        storeList.value = res.data.Data;
        pager.totalCount = res.data.TotalCount;
        pager.pageCount = res.data.PageCount;
    })
}
const pager = reactive({
    pageIndex: 1,
    pageSize: 10,
    totalCount: 0,
    pageCount: 0,
})

function handleSizeChange(size) {
    pager.pageSize = size;
    getStoreList();
}
function handleCurrentChange(index) {
    pager.pageIndex = index;
    getStoreList();
}
interface IOption {
    value: string,
    label: string,
    children: IOption[]
}
//级联选择器
const addressTreeList = reactive<IOption[]>([]);
const props1 = {
    checkStrictly: false,
}
const handleChange = (value) => {
    console.log(value)
    handleCurrentChange(1)
}
function getProvinceAndCityList() {
    axios.get("Dic/GetCascaderList").then(res => {
        addressTreeList.value = res.data;
        console.log(addressTreeList.value)
    })
}

//门店状态
const storeStatusList = ref([
    {
        value: true,
        label: "启用",
    },
    {
        value: false,
        label: "禁用",
    },
])
const storeAddVisiable = ref(false)
const form = reactive({
    //StoreId: 0,
    StoreName: "微盟酒店",
    Address: "天津/天津市/河北区",
    AddressArr: [],
    HotelType: "公寓式酒店",
    HotelLogo: "",
    Introduction: "打造最优质的服务",
    Remark: "价格优惠 服务周到",
    TenantId: "",
});




const hotelTypeList = ref([])
function getHotelTypeList() {
    axios.get("Dic/GetDicByIdentification?identification=HotelType").then(res => {
        hotelTypeList.value = res.data.Data;
        console.log(hotelTypeList)
    })
}
//店铺添加
function storeAdd() {
    form.Address = form.AddressArr.join('');
    form.TenantId = store.getUserInfo().TenantId;
    //let fromStoreList = session.get("fromStoreList");
    axios.post("Store/StoreAdd", form).then(res => {
        if (res.data.Code == 200) {
            ElMessage({
                message: '店铺申请成功',
                type: 'success',
            })
            storeAddVisiable.value = false;
            getStoreList();


        } else {
            ElMessage({
                message: res.data.Msg,
                type: 'error',
            })

        }
    })
}


onMounted(() => {
    getStoreList();
    getHotelTypeList()
    getProvinceAndCityList();
})

</script>

<style scoped>
.el-link {
    margin: 0 5px;
}

.el-form-item {
    margin: 5px 0
}
</style>